<template>
  <el-row class="login_centauner" type="flex" justify="center" align="middle">
    <div class="banner">
      <el-col :span="6" class="login_box">
        <i class="min_logo"></i>
        <h3>黑马面面&nbsp;&nbsp;用户登录</h3>
        <!-- 登陆表单 -->
        <!-- 
       el-form 表单组件做表单校验需要的要点
       1、el-form 标签要有 model 属性值为 表单要检验的数据对象
       2、要有 rules 属性是 表单的规则验证对象，
       3、需要设置一个 ref 属性，让验证结果被捕获
       el-form-item 组件需要一个 prop 属性 为需要检验的 字段
       el-input 组件 绑定 v-model   
       -->
        <el-form :model="formData" :rules="formRules" ref="formRef">
          <el-form-item prop="username">
            <el-input
              v-model="formData.username"
              placeholder="请输入内容"
              prefix-icon="el-icon-user"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="formData.password"
              placeholder="请输入内容"
              prefix-icon="el-icon-lock"
              clearable
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label-width="0px">
            <el-button
              :loading="isloading"
              class="login_btn"
              type="primary"
              @click="BtnLoginOk"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </div>
  </el-row>
</template>

<script>
// 登陆接口
// import { LoginApi } from '@/api/User'
export default {
  name: "LoginIndex",

  data() {
    return {
      formData: {
        username: "root@admin.com",
        password:
          "8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92",
      },
      isloading: false,
      // 表单校验规则
      formRules: {
        username: [
          {
            required: true,
            message: "请输入账号",
            trigger: ["blur", "change"],
          },
          { min: 5, max: 16, message: "长度在6-16之间", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },

  methods: {
    async BtnLoginOk() {
      // // 1、表单校验(调用表单的校验方发获取表单的验证结果)
      try {
        await this.$refs.formRef.validate();
      } catch (error) {
        return console.log(error);
      }
      // 3、发送求情
      this.isloading = true;
      // 2、数据处理
      await this.$store.dispatch("user/loginAction", this.formData);
      // 4、跳转主页
      this.$router.push("/");
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.login_centauner {
  background: url("~@/assets/bg.2f46505a.jpg");
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #2d3a4b;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.login_box {
  position: absolute;
  left: 20%;
  top: 50%;
  width: 520px;
  padding: 15px 35px 15px 35px;
  margin: -200px 0 0 0;
  background: #f5f5f5;
}
.min_logo {
  position: absolute;
  top: 32px;
  display: inline-block;
  width: 35px;
  height: 26px;
  background: url("~@/assets/min-logo.png") no-repeat;
}
.banner {
  height: 100%;
  width: 100%;
  position: relative;
  background: url("~@/assets/logingBg.989212c0.png") no-repeat 100% 100%;
}
.login_box h3 {
  /* text-align: center; */
  color: #000;
  font-weight: normal;
  font-size: 22px;
  line-height: 60px;
  margin-bottom: 15px;
  margin-left: 50px;
}
.login_btn {
  display: block;
  width: 100%;
  height: 50px;
  font-size: 22px;
}
</style>
